<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <script type="text/javascript">
    	window.onload = function(){
			size=document.body.clientWidth/30;
			document.getElementsByTagName("html")[0].style.fontSize = size+"px";
		var tw = document.getElementById("p_two");
		var ne = document.getElementById("p_new");
		var mo = document.getElementById("p_mo");
		var den2= document.getElementById("p_den2");
		var den1 = document.getElementById("p_den1");
		var player = document.getElementById("player");
		den1.addEventListener("touchstart",function(){
				if(player.paused){
					player.play();
					den1.style.display="block";
					den2.style.display="none";
				}else{
					player.pause();
					den2.style.display="block";
					den1.style.display="none";
				}
			},false);
			den2.addEventListener("touchstart",function(){
				if(player.paused){
					player.play();
					den1.style.display="block";
					den2.style.display="none";
				}else{
					player.pause();
					den2.style.display="block";
					den1.style.display="none";
				}
			},false);
			ne.addEventListener("touchstart",function(){
					mo.style.animation="na 3s";
					ne.style.animation="na 3s";
					tw.style.animation="fa 3s";
					setTimeout(function(){
					mo.style.display="none";
					ne.style.display="none";
					tw.style.display="block";
				},3000);
			},false);
			tw.addEventListener("touchstart",function(){
					mo.style.animation="fa 3s";
					ne.style.animation="fa 3s";
					tw.style.animation="na 3s";
					setTimeout(function(){
						mo.style.display="block";
						ne.style.display="block";
						tw.style.display="none";
						mo.style.animation="mo 20s  linear  infinite";
				},3000);
			},false);
		}
   		
    </script>
   <style type="text/css">
   *{
   	margin: 0;
   	padding: 0;
   	border: none;
   }
   html,body{
   	width: 100%;
   	height: 100%;
   }
   #page{
   	width: 100%;
   	height: 100%;
   	background: url(img/hu_0000s_0008_图层-4.png);
   	background-size: cover;
   }
   #p_zi{
   	position: absolute;
   	top: 0;
   	left: 0;
   	width: 30rem;
   	height: 45rem;
   	background: url(img/hu_0000s_0001_图层-4.png);
   	background-size: contain;
   	animation: fash 8s linear infinite;
    		-webkit-animation: fash 8s linear infinite;
   }
   @-webkit-keyframes fash{
    		0%{opacity: 0 ;}
    		20%{opacity: 0.5 ;}
    		40%{opacity: 1.0 ;}
    		60%{opacity: 0.5 ;}
    		80%{opacity: 0 ;}
    		100%{opacity: 0 ;}
    	}
    	@keyframes fash{
    		0%{opacity: 0 ;}
    		20%{opacity: 0.5 ;}
    		40%{opacity: 1.0 ;}
    		60%{opacity: 0.5 ;}
    		80%{opacity: 0 ;}
    		100%{opacity: 0 ;}
    	}
   #p_fish
   {
   	position: absolute;
   	bottom: 0;
   	width: 30rem;
   	height: 16.95454545454545rem;
   	background: url(img/yu_0000_鱼.png);
   	background-size: contain;
   	
   }
   #p_yin{
   	position: absolute;
   	top: 2rem;
   	right: 0;
   	width: 5rem;
   	height: 7.044534412955466rem;
   	background: url(img/db419797054db02b5b8839c3c2710942.png);
   	background-size: contain;
   }
   #p_flo{
   	position: absolute;
   	width: 14.9rem;
   	height: 19.76958525345622rem;
   	left: 0;
   	bottom: 5rem;
   	background: url(img/hu_0000s_0002_5.png);
   	background-size: contain;
   }
   #p_mo{
   	position: absolute;
   	top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 22rem;
    height: 22.55586261350178rem;
    background: url(img/mo_0000s_0000s_0000_d.png);
    background-size: contain;
    animation: mo 20s linear infinite;
    		-webkit-animation: mo 20s linear infinite;
   }
   @-webkit-keyframes mo{
    		0%{transform: scale(1);}
    		10%{transform: scale(1.1);opacity: 1;}
    		20%{transform: scale(1.2);opacity: 0.9;}
    		30%{transform: scale(1.3);opacity: 0.7;}
    		40%{transform: scale(1.4);opacity: 0.5;}
    		50%{transform: scale(1.5);opacity: 0.1;}
    		60%{transform: scale(1.5);opacity: 0;}
    		65%{transform: scale(1);opacity: 0;}
    		70%{transform: scale(1);opacity: 0.1;}
    		80%{transform: scale(1);opacity: 0.3;}
    		90%{transform: scale(1);opacity: 0.6;}
    		100%{transform: scale(1);opacity: 0.9;}
    	}
    	@keyframes mo{
    		0%{transform: scale(1);}
    		10%{transform: scale(1.1);opacity: 1;}
    		20%{transform: scale(1.2);opacity: 0.9;}
    		30%{transform: scale(1.3);opacity: 0.7;}
    		40%{transform: scale(1.4);opacity: 0.5;}
    		50%{transform: scale(1.5);opacity: 0.1;}
    		60%{transform: scale(1.5);opacity: 0;}
    		65%{transform: scale(1);opacity: 0;}
    		70%{transform: scale(1);opacity: 0.1;}
    		80%{transform: scale(1);opacity: 0.3;}
    		90%{transform: scale(1);opacity: 0.6;}
    		100%{transform: scale(1);opacity: 0.9;}
    	}
   #p_two{
   	position: absolute;
   	top: 12rem;
   	left: 2rem;
   	width: 25rem;
   	height: 15.26908635794743rem;
   	background:url(img/fei_0001_12.png);
   	background-size: contain;
   	display: none;
   }
   #p_den1{
   	position:absolute;
   	bottom: 0;
   	left: 1rem;
   	width: 3.5rem;
   	height: 4.447653429602888rem;
   	background: url(img/den_0000s_0000_图层-1.png);
   	background-size: contain;
   	display: block;
   }
   #p_den2{
   	position:absolute;
   	bottom: 0;
   	left: 1rem;
   	width: 3.5rem;
   	height: 4.447653429602888rem;
   	background:url(img/den_0000s_0001_右灯笼.png);
   	background-size: contain;
   	display: none;
   }
   #p_new
   {
   	position: absolute;
   	top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 20rem;
    height: 12.96955772544515rem;
    background: url(img/li_0007_12.png);
    background-size: contain;
   }
   @-webkit-keyframes na{
   			0%{opacity: 1 ;}
    		100%{opacity: 0 ;}
   }
   @keyframes na{
   			0%{opacity: 1 ;}
    		100%{opacity: 0 ;}
   }
   @-webkit-keyframes fa{
   			0%{opacity: 0 ;}
    		100%{opacity: 1;}
   }
   @keyframes fa{
   			0%{opacity: 0 ;}
    		100%{opacity: 1;}
   }
   
   
   </style>
</head>
<body>
	<audio id="player" src="static/吉田潔 - 腾雾奔霄.mp3" loop="loop" autoplay="autoplay"></audio>
	<div id="page">
	<div id="p_mo"></div>
	<div id="p_fish"></div>
	<div id="p_zi"></div>
	<div id="p_yin"></div>
	<div id="p_flo"></div> 
	<div id="p_two"></div>
	<div id="p_den1"></div>
	<div id="p_den2"></div>
	<div id="p_new"></div>
	</div>
</body>
</html>